<template>
  <div class="node-panel">
    <div class="node-item" @mousedown="openSelection()">
      <div class="node-item-icon selection"></div>
      <span class="node-label">选区</span>
    </div>
    <div class="node-item" @mousedown="addStartNode()">
      <div class="node-item-icon start"></div>
      <span class="node-label">开始节点</span>
    </div>
    <div class="node-item" @mousedown="addGeneralNode()">
      <div class="node-item-icon general"></div>
      <span class="node-label">普通节点</span>
    </div>
    <div class="node-item" @mousedown="addConditionNode()">
      <div class="node-item-icon condition"></div>
      <span class="node-label">条件节点</span>
    </div>
    <div class="node-item" @mousedown="addHtmlNode()">
      <div class="node-item-icon html"></div>
      <span class="node-label">Html节点</span>
    </div>
    <div class="node-item" @mousedown="addEndNode()">
      <div class="node-item-icon end"></div>
      <span class="node-label">结束节点</span>
    </div>
  </div>
</template>
<script lang="ts">
import LogicFlow from '@logicflow/core'
//注册节点
import CustomRect from '../registerNode/CustomRect'
import CustomPolygon from '../registerNode/CustomPolygon'
import CustomStart from '../registerNode/CustomStart'
import CustomEnd from '../registerNode/CustomEnd'
import CustomHtml from '../registerNode/CustomHtml'

//UI组件
import { ElMessage } from 'element-plus'

export default {
  name: 'CustomNodePanel',
  data() {
    return {}
  },
  props: {
    lf: Object
  },

  mounted() {
    //框选使用
    let lf = this.$props.lf as LogicFlow
    lf &&
      lf.on('selection:selected', () => {
        lf.updateEditConfig({
          stopMoveGraph: false
        })
      })
    //注册节点
    this.registerNode()
  },
  methods: {
    registerNode() {
      let that = this
      let lf = this.$props.lf as LogicFlow
      lf.register(CustomRect)
      lf.register(CustomPolygon)
      lf.register(CustomStart)
      lf.register(CustomEnd)
      lf.register(CustomHtml)

      //注册非业务事件，业务事件需要放在上一层
      lf.on('connection:not-allowed', (data) => {
        ElMessage({
          type: 'error',
          message: data.msg
        })
      })

      lf.on('custom:button-click', (model) => {
        console.log('custom:button-click')
        lf.setProperties(model.id, {
          body: 'LogicFlow'
        })
      })
    },
    openSelection() {
      ;(this.$props.lf as LogicFlow).updateEditConfig({
        stopMoveGraph: true
      })
    },
    addStartNode() {
      ;(this.$props.lf as LogicFlow).dnd.startDrag({
        type: 'CustomStart',
        text: '开始',
        properties: { start: '开始' } //自定义属性，同时导出的文件节点属性上会生成
      })
    },
    addGeneralNode() {
      ;(this.$props.lf as LogicFlow).dnd.startDrag({
        type: 'CustomRect',
        text: '普通节点',
        properties: { CustomRect: '矩形', PropValue: '' } //自定义属性，同时导出的文件节点属性上会生成
      })
    },
    addConditionNode() {
      ;(this.$props.lf as LogicFlow).dnd.startDrag({
        type: 'CustomaPolygon',
        text: '条件节点'
      })
    },
    addHtmlNode() {
      ;(this.$props.lf as LogicFlow).dnd.startDrag({
        type: 'CustomHtml',
        text: '',
        properties: { text: '点击修改标题' }
      })
    },
    addEndNode() {
      ;(this.$props.lf as LogicFlow).dnd.startDrag({
        type: 'CustomEnd',
        text: '结束节点'
      })
    }
  }
}
</script>
<style>
.node-panel {
  position: absolute;
  top: 100px;
  left: 10px;
  width: 50px;
  padding: 10px;
  background-color: white;
  box-shadow: 0 0 10px 1px rgb(228, 224, 219);
  border-radius: 6px;
  text-align: center;
  z-index: 101;
}
.node-item {
  margin-bottom: 10px;
}
.node-item-icon {
  width: 30px;
  height: 30px;
  margin-left: 10px;
  background-size: cover;
}
.node-label {
  font-size: 12px;
  margin-top: 5px;
  user-select: none;
}

.selection {
  background: url()
    center center no-repeat;
  cursor: grab;
}

.start {
  background: url()
    center center no-repeat;
  cursor: grab;
}
.end {
  background: url()
    center center no-repeat;
  cursor: grab;
}
.general {
  background: url()
    center center no-repeat;
  cursor: grab;
}
.html {
  background: url()
    center center no-repeat;
  cursor: grab;
}

.condition {
  background: url()
    center center no-repeat;
  cursor: grab;
}

/*******************纯html格式的样式****************/

.lf-html-wrapper {
  width: 100px;
  height: 100px;
}
.lf-html-wrapper .custom-html {
  width: 96px;
  height: 96px;
  border: 2px solid #2987ff;
}

.lf-html-wrapper .custom-head {
  color: red;
  height: 26px;
  line-height: 26px;
}

.lf-html-wrapper .custom-body {
  color: #2987ff;
  height: 50px;
  line-height: 50px;
}
</style>
